<template>
  <div class="globe-rotater-box-wrapper">
    <slider-bar title="自转加速" titleWidth="4em" v-model:value="multiplier" :min="0" :max="5000" :step="100" />
    <a class="playtool" :class="{ playing }" @click="togglePlay" :title="playing ? '暂停' : '地球自转'">
      <PlayCircleOutlined v-if="!playing" />
      <PauseCircleOutlined v-if="playing" />
    </a>
  </div>
</template>

<script lang="ts">
import { SliderBar } from '@components/widgets';
import { PlayCircleOutlined, PauseCircleOutlined, PlayCircleFilled, PauseCircleFilled } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
import Rotater from '../rotater';

export default defineComponent({
  name: 'globe-rotater-box',
  components: { PlayCircleOutlined, PauseCircleOutlined, SliderBar },
  setup(props, context) {
    // console.log('props', props);
    // console.log('context', context);
    return { rotater: null };
  },
  props: {
    mp: {
      type: Number,
      default: 500
    },
    startOnMount: {
      type: Boolean,
      default: false
    },
    viewerSource: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      playing: false,
      rotateOptions: { multiplier: 500 }
    };
  },
  computed: {
    viewer() {
      return this.viewerSource && this.viewerSource.viewer;
    },
    multiplier: {
      get() {
        return this.rotateOptions.multiplier;
      },
      set(val) {
        this.rotateOptions.multiplier = val;
        this.viewer.clock.multiplier = val || 1;
      }
    }
  },
  watch: {
    mp: {
      handler(newVal) {
        this.rotateOptions.multiplier = newVal || 0;
      },
      immediate: true //true就表示会立即执行
    },
    viewer: {
      handler(newVal, oldVal) {
        // console.log(newVal)
        newVal && this.initRotater();
      },
      immediate: true //true就表示会立即执行
    }
  },
  mounted() {
    console.log('globe-rotater');
  },
  beforeUnmount() {
    let { rotater } = this;
    rotater && rotater.stop();
    this.rotater = null;
  },
  methods: {
    initRotater() {
      let { viewer, rotateOptions, startOnMount, playing } = this;
      this.rotater = new Rotater(viewer, rotateOptions);
      startOnMount && !playing && this.togglePlay();
      return this.rotater;
    },
    togglePlay() {
      this.playing = !this.playing;
      let { rotater } = this;
      if (this.playing) {
        rotater.start();
      } else {
        rotater.stop();
      }
    }
  }
});
</script>

<style lang="less">
.globe-rotater-box-wrapper {
  display: flex;
  align-items: stretch;
  width: 20em;
  max-width: 100%;
  padding: 0 10px;
  background-color: rgba(0, 0, 0, 0.75);
  margin-bottom: 10px;

  .playtool {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    padding: 0px 6px;
    margin: 5px 0 5px 5px;
    color: white;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 3px;
    opacity: 0.7;
    transition: all 500ms;

    &.playing {
      background-color: rgba(0, 0, 200, 1);
    }

    &:hover {
      opacity: 0.9;
    }
  }
}
</style>
